<template>
	<template v-if="type == 'pie'">
		<view class="pie">
			<view class="outer">
				<view class="inner">
					<view class="number">60</view>
				</view>
				<!-- <svg xmlns="http://www.w3.org/2000/svg">
					<defs>
						<linearGradient id="circle1">
							<stop stop-color="#baddf4" offset="0" />
							<stop stop-color="lightSkyBlue" offset="1" />
						</linearGradient>
					</defs>
					<circle :cx="width_" :cy="height_" :r="height_" stroke-linecap="round" />
				</svg> -->
			</view>

		</view>

		<!-- <canvas ref="canvas" :width="width_" :height="width_"></canvas> -->

		<!-- <view class="nhm-progress__box">
	<view class="nhm-progressbar__bg"
		:style="{ height: width + 'rpx', borderRadius: radius, background: backgroundColor }">
		<view class="nhm-progress__bar"
			:style="{ height: width + 'rpx', background: activeColor ,transform:`translate3d(-${translateX},0,0)`,transitionDuration:`${time}s`}">
		</view>
	</view>
	<view class="nhm-progress__percent"
		:style="{ width: percentWidth + 'rpx', fontSize: size + 'rpx', color: color }" v-if="showInfo">
		{{ percentage }}%
	</view>
</view> -->
	</template>
	<template v-else>
		<!-- <view class="nhm-progress__box">
	<view class="nhm-progressbar__bg"
		:style="{ height: width + 'rpx', borderRadius: radius, background: backgroundColor }">
		<view class="nhm-progress__bar"
			:style="{ height: width + 'rpx', background: activeColor ,transform:`translate3d(-${translateX},0,0)`,transitionDuration:`${time}s`}">
		</view>
	</view>
	<view class="nhm-progress__percent"
		:style="{ width: percentWidth + 'rpx', fontSize: size + 'rpx', color: color }" v-if="showInfo">
		{{ percentage }}%
	</view>
</view> -->
	</template>
</template>
<script setup>
// 对象形式声明 key value
const props = defineProps({
	type: { //类型，bar、pie两种样式
		type: String,
		required: false,
		default: "bar"
	},
	//百分比 0-100
	percent: {
		type: [Number, String],
		default: 0
	},
	//右侧是否显示百分比
	showInfo: {
		type: Boolean,
		default: false
	},
	//圆角大小
	radius: {
		type: String,
		default: '8rpx'
	},
	//右侧百分比字体大小 rpx
	size: {
		type: String,
		default: '24rpx'
	},
	//右侧百分比颜色
	color: {
		type: String,
		default: '#333'
	},
	//右侧百分比宽度
	percentWidth: {
		type: Number,
		default: 96
	},
	//进度条宽度 rpx
	width: {
		type: String,
		default: '8rpx'
	},
	//进度条高度 rpx
	height: {
		type: String,
		default: '8rpx'
	},
	//已选进度条颜色,可渐变
	activeColor: {
		type: String,
		default: '#5677fc'
	},
	//未选择的进度条的颜色
	backgroundColor: {
		type: String,
		default: '#EBEBEB'
	},
	//进度增加1%所需毫秒数
	duration: {
		type: Number,
		default: 15
	}

})

let height = props.height
let width = props.width
let background = props.backgroundColor
let fontsize = props.size


//将高度转换为数字
let height_ = (props.height.replace('rpx', '').replace('px', '').replace('rem', '').replace('vh', '').replace('vw', '').replace('%', '')) / 2;
let width_ = (props.width.replace('rpx', '').replace('px', '').replace('rem', '').replace('vh', '').replace('vw', '').replace('%', '')) / 2;

console.log(width_)
</script>

<style scoped lang="scss">
// pie型样式
.pie {
	height: v-bind(height);
	width: v-bind(width);
	// position: relative;


	svg {
		height: v-bind(height);
		width: v-bind(width);
		position: absolute;

		// top: 50%;
		// left: 50%;
		// transform: translateY(-50%) translateX(-50%);
		circle {
			fill: none;
			// fill:#00cc00;
			stroke: url(#circle1);
			stroke-width: calc(calc(v-bind(height) - calc(v-bind(height)/1.5))/2);
			stroke-dasharray: 200rpx;
			stroke-dashoffset: 100rpx;
			animation: move 2s linear forwards;
		}

		@keyframes move {
			/* 0% {
            stroke-dashoffset: 300px;
        } */

			100% {
				// stroke-dashoffset: 100rpx;
				stroke-dasharray: 400rpx;
			}
		}
	}
}

.outer {
	position: absolute;
	position: relative;

	height: v-bind(height);
	width: v-bind(width);
	border-radius: 50%;
	background-color: v-bind(background);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 6rpx 6rpx 10rpx -1rpx rgba(0, 0, 0, 0.15),
		-6rpx -6rpx 10rpx -1rpx rgba(255, 255, 255, 0.7);
}

.inner {
	height: calc(v-bind(height)/1.5);
	width: calc(v-bind(width)/1.5);
	border-radius: 50%;
	background-color: v-bind(background);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 4rpx 4rpx 8rpx -1rpx rgba(0, 0, 0, 0.15),
		inset -4rpx -4rpx 8rpx -1rpx rgba(255, 255, 255, 0.7),
		inset -2rpx -2rpx 4rpx -1rpx rgba(255, 255, 255, 0.7),
		0rpx 12rpx 10rpx -10rpx rgba(0, 0, 0, 0.05);

	font-weight: 800;
	font-size: v-bind(fontsize);
	color: #97b8ed;
}


// .pie {
// 	position: relative;
// 	// height: v-bind(width);
// 	// line-height: v-bind(width);
// 	// width: v-bind(width);
// }

// .nhm-progress__box {
// 	width: 100%;
// 	display: flex;
// 	align-items: center;
// }

// .nhm-progressbar__bg {
// 	width: 100%;
// 	position: relative;
// 	overflow: hidden;
// 	transform: translateZ(0);
// }

// .nhm-progress__bar {
// 	width: 100%;
// 	position: absolute;
// 	left: 0;
// 	top: 0;
// 	z-index: 2;
// 	transform: translateX(-100%);
// 	transition-delay: 0s;
// 	transition-property: transform;
// 	transition-timing-function: linear;
// }

// .nhm-progress__percent {
// 	text-align: center;
// }
</style>
